<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <script type="text/javascript" src="//cdn.bootcss.com/jquery/1.7.2/jquery.min.js"></script>
    <title></title>
    <style media="screen" type="text/css">
    </style>
  </head>
  <body>
    <div class="box_1" id="div1"  align="center" >
      <div class="box_2">
          <tr class="num1">
              <td><h1 style="color:green;">请输入追溯码:</h1></td>
              <td><input type="text" id="inp" onfocus="show(this)" value=""  style="width:300px;height:30px"></td>
              <td><input type="submit" value="开始查询" style="width:100px;height:30px;" ></td>
          </tr>
      </div>
      <div id="div5">
      <div id="div3">
      <table class="box_3" id="box_3">
          <tr>
            <td><input type="button" name="btn" value="1" style="height:50px;width:100px;"></td>
            <td><input type="button" name="btn" value="2" style="height:50px;width:100px;"></td>
            <td><input type="button" name="btn" value="3" style="height:50px;width:100px;"></td>
            <td><input type="button" name="btn" value="后退" style="height:50px;width:100px;"></td>
          </tr>
          <tr>
            <td><input type="button" name="btn" value="4" style="height:50px;width:100px;"></td>
            <td><input type="button" name="btn" value="5" style="height:50px;width:100px;"></td>
            <td><input type="button" name="btn" value="6" style="height:50px;width:100px;"></td>
            <td><input type="button" name="btn" value="0" style="height:50px;width:100px;"></td>
          </tr>
          <tr>
            <td><input type="button" name="btn" value="7" style="height:50px;width:100px;"></td>
            <td><input type="button" name="btn" value="8" style="height:50px;width:100px;"></td>
            <td><input type="button" name="btn" value="9" style="height:50px;width:100px;"></td>
            <td><input type="button" name="btn" value="清空" style="height:50px;width:100px;"></td>
          </tr>
      </table>
    </div>
    </div>
    <div id="div4">
      <div  style='border:1px solid green ;width:500px;height:500px;margin-top:30px' id="num1"></div>
      <div  style='border:1px solid green ;width:500px;height:500px;margin-top:30px' id="num2"></div>
      <div  style='border:1px solid green ;width:300px;height:400px;margin-top:30px' id="num3"></div>

    </div>
      </div>
<script type="text/javascript">
  var input=document.getElementsByTagName('input');//获取点击按钮的值
  input[2].onclick=function(){//1
    input[0].value+=input[2].value;
  }
  input[3].onclick=function(){//2
    input[0].value+=input[3].value;
  }
  input[4].onclick=function(){//3
    input[0].value+=input[4].value;
  }
  input[5].onclick=function(){//后退
    input[0].value=input[0].value.substring(0,input[0].value.length-1);
  }
  input[6].onclick=function(){//4
    input[0].value+=input[6].value;
  }
  input[7].onclick=function(){//5
    input[0].value+=input[7].value;
  }
  input[8].onclick=function(){//6
    input[0].value+=input[8].value;
  }
  input[9].onclick=function(){//0
    input[0].value+=input[9].value;
  }
  input[10].onclick=function(){//7
    input[0].value+=input[10].value;
  }
  input[11].onclick=function(){//8
    input[0].value+=input[11].value;
  }
  input[12].onclick=function(){//9
    input[0].value+=input[12].value;
  }
  input[13].onclick=function(){//清空
    input[0].value="";
  }
  /*var btn_1=document.getElementById('btn_1');
  btn_1.onmouseover=function(){
    btn_1.style.background="#71C671";
  }
  btn_1.onmouseout=function(){
    btn_1.style.background="";
  }*/
  var btn=document.getElementsByName('btn');//for循环
  btn[0].onmouseover=function(){
    btn[0].style.background="#71C671";
  }
  btn[0].onmouseout=function(){
    btn[0].style.background="";
  }
  btn[1].onmouseover=function(){
    btn[1].style.background="#71C671";
  }
  btn[1].onmouseout=function(){
    btn[1].style.background="";
  }
  btn[2].onmouseover=function(){
    btn[2].style.background="#71C671";
  }
  btn[2].onmouseout=function(){
    btn[2].style.background="";
  }
  btn[3].onmouseover=function(){
    btn[3].style.background="#71C671";
  }
  btn[3].onmouseout=function(){
    btn[3].style.background="";
  }
  btn[4].onmouseover=function(){
    btn[4].style.background="#71C671";
  }
  btn[4].onmouseout=function(){
    btn[4].style.background="";
  }
  btn[5].onmouseover=function(){
    btn[5].style.background="#71C671";
  }
  btn[5].onmouseout=function(){
    btn[5].style.background="";
  }
  btn[6].onmouseover=function(){
    btn[6].style.background="#71C671";
  }
  btn[6].onmouseout=function(){
    btn[6].style.background="";
  }
  btn[7].onmouseover=function(){
    btn[7].style.background="#71C671";
  }
  btn[7].onmouseout=function(){
    btn[7].style.background="";
  }
  btn[8].onmouseover=function(){
    btn[8].style.background="#71C671";
  }
  btn[8].onmouseout=function(){
    btn[8].style.background="";
  }
  btn[9].onmouseover=function(){
    btn[9].style.background="#71C671";
  }
  btn[9].onmouseout=function(){
    btn[9].style.background="";
  }
  btn[10].onmouseover=function(){
    btn[10].style.background="#71C671";
  }
  btn[10].onmouseout=function(){
    btn[10].style.background="";
  }
  btn[11].onmouseover=function(){
    btn[11].style.background="#71C671";
  }
  btn[11].onmouseout=function(){
    btn[11].style.background="";
  }
   //让查询结果覆盖原来的界面
  var div3=document.getElementById('div3');
  var div4=document.getElementById('div4');
  var div5=document.getElementById('div5');
  div4.style.display="none";//使查询信息布局隐藏
  input[1].onclick=function(){
    var inp =document.getElementById("inp").value;
        var url="admin/data.php?action=select_row";
       var data={"num":inp};
       var success=function(response){
         //return response;
         $("#num1").html('信息检测:'+response['username']);
           $("#num2").html('物流信息：'+response['password']);
           $("#num3").html('企业信息：'+response['name']);


         // $("#num4").html() + response['check_in'];
         // $("#num1").html(response['check_in']);
         // $("#num2").html(response['wuliu_in']);
         // $("#num3").html(response['company_in']);
        
         // var div4=document.getElementById('div4');
         // div4.innerHTML=response;
       }
       $.post(url,data,success,"json");
        div3.style.display="none";
        div4.style.display="inline-block";
         // $("#div4").html(response);
       }
     function show(div5){
         div3.style.display="inline-block";
         div4.style.display="none";
     }
</script>
</body>
</html>
